<template>
  <el-drawer
    title="添加收货地址"
    class="address-dialog"
    :visible="addressFormVisible"
    size="75%"
    direction="btt"
   :before-close="handleClose"
  >
    <el-form
      :model="addressForm"
      :rules="addressRules"
      ref="addressForm"
      label-width="100px"
    >
      <el-form-item label="收货人" prop="name">
        <el-input
          v-model="addressForm.name"
          autocomplete="off"
          style="width: auto"
          placeholder="收货人"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input
          v-model="addressForm.phone"
          autocomplete="off"
          style="width: auto"
          placeholder="手机号"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="所在地区" prop="selectedOptions">
        <el-cascader
          size="large"
          :options="options"
          separator=" "
          v-model="addressForm.selectedOptions"
          placeholder="所在地区"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="详细地址" prop="detailAddress">
        <el-input
          v-model="addressForm.detailAddress"
          autocomplete="off"
          style="width: auto"
          placeholder="详细地址"
        >
          <i class="el-icon-edit el-input__icon" slot="suffix" />
        </el-input>
      </el-form-item>
    </el-form>
    <el-button @click="handleClose">取 消</el-button>
    <el-button type="primary" @click="addDelivery('addressForm')"
      >确 定</el-button
    >
  </el-drawer>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";
export default {
  props: {
    addressFormVisible: {
      type: Boolean,
      default: false,
    },
    setAcceptAddress: {
      type: Function,
      default: () => {},
    },
    // getAddresses: {
    //   type: Function,
    //   default: () => {},
    // },
  },
  data() {
    let validateOption = (rule, value, callback) => {
      if (value === null || value.length === 0) {
        callback(new Error("请选择收货地址"));
      } else {
        callback();
      }
    };
    let validateAddress = (rule, value, callback) => {
      if (value === null || value.trim().length === 0) {
        callback(new Error("请填写详细地址"));
      } else {
        callback();
      }
    };
    return {
      addressForm: {
        name: "",
        phone: "",
        selectedOptions: [],
        detailAddress: "", //详细地址
      },
      options: regionData,
      addressRules: {
        name: [{ validator: validateAddress, trigger: "blur" }],
        phone: [{ validator: validateAddress, trigger: "blur" }],
        selectedOptions: [{ validator: validateOption, trigger: "blur" }],
        detailAddress: [{ validator: validateAddress, trigger: "blur" }],
      },
    };
  },
  methods: {
    handleClose() {
      this.$emit('update:addressFormVisible', false)
      this.addressForm = {}
    },
    // close() {
    //   // this.$emit("closeNewAddress");
    //   this.closeNewAddress();
    // },
    addDelivery(formName) {
      this.$refs[formName].validate((valid) => {
        let address = {
          uid: this.$store.state.user["userId"],
          name: "",
          phone: "",
          area: "",
          detailAddress: "",
        };
        if (valid) {
          let str = "";
          let ad = this.addressForm.selectedOptions;
          for (let i = 0, len = ad.length; i < len; i++) {
            str += CodeToText[ad[i]] + " ";
          }
          address.name = this.addressForm.name;
          address.phone = this.addressForm.phone;
          address.area = str;
          address.detailAddress = this.addressForm.detailAddress;
          console.log("AddAddress", address);
          this.setAcceptAddress(address)
          this.handleClose()
          this.$http.post("/deliveryInfo/addAddress", address).catch((e) => {
            console.log(e);
          });
          this.$emit("getAddresses");
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
</style>